import React from 'react';
import './MotionPack.css';

const MotionPack = ({ assets }) => {
  // 模拟数据包数据
  const motionPacks = [
    {
      id: 1,
      title: '现代舞基础动作集',
      format: 'FBX',
      size: '45.2MB',
      price: '¥99',
      isFree: false,
      preview: '/assets/images/motion-preview-1.webp'
    },
    {
      id: 2,
      title: '武术动作合集',
      format: 'BVH',
      size: '78.5MB',
      price: '免费',
      isFree: true,
      preview: '/assets/images/motion-preview-2.webp'
    },
    {
      id: 3,
      title: '街舞基础教学包',
      format: 'FBX',
      size: '62.3MB',
      price: '¥129',
      isFree: false,
      preview: '/assets/images/motion-preview-3.webp'
    },
    {
      id: 4,
      title: '瑜伽动作序列',
      format: 'BVH',
      size: '35.8MB',
      price: '免费',
      isFree: true,
      preview: '/assets/images/motion-preview-4.webp'
    },
    {
      id: 5,
      title: '跑酷动作集',
      format: 'FBX',
      size: '89.1MB',
      price: '¥159',
      isFree: false,
      preview: '/assets/images/motion-preview-5.webp'
    },
    {
      id: 6,
      title: '太极拳动作包',
      format: 'BVH',
      size: '42.6MB',
      price: '免费',
      isFree: true,
      preview: '/assets/images/motion-preview-6.webp'
    },
    {
      id: 7,
      title: '现代舞进阶动作集',
      format: 'FBX',
      size: '95.4MB',
      price: '¥199',
      isFree: false,
      preview: '/assets/images/motion-preview-7.webp'
    },
    {
      id: 8,
      title: '基础动作库',
      format: 'BVH',
      size: '28.3MB',
      price: '免费',
      isFree: true,
      preview: '/assets/images/motion-preview-8.webp'
    }
  ];

  return (
    <div className="motion-pack-container">
      {/* FUTURE DEV: 状态管理
        - 使用Redux/Context管理资源状态
        - 实现购物车功能
        - 管理用户购买历史
        - 处理支付状态
      */}
      
      <div className="filter-bar">
        {/* FUTURE DEV: 筛选功能
          - 添加价格范围筛选
          - 实现多标签筛选
          - 添加排序功能
          - 实现搜索功能
        */}
        <div className="filter-group">
          <button className="filter-button active">全部</button>
          <button className="filter-button">FBX</button>
          <button className="filter-button">BVH</button>
        </div>
        <div className="filter-group">
          <button className="filter-button">免费</button>
          <button className="filter-button">付费</button>
        </div>
      </div>

      {/* 数据包网格 */}
      <div className="motion-grid">
        {assets.map(pack => (
          <article key={pack.id} className="motion-card">
            <div className="preview-placeholder">
              {/* FUTURE DEV: 预览功能
                - 添加3D预览
                - 实现动画预览
                - 支持多角度查看
              */}
              <img src={pack.preview} alt={pack.title} loading="lazy" />
            </div>
            <div className="card-content">
              <div className="card-header">
                <h3>{pack.title}</h3>
                <span className={`format-tag ${pack.format.toLowerCase()}`}>
                  {pack.format}
                </span>
              </div>
              <div className="card-meta">
                <span className="file-size">{pack.size}</span>
                <span className={`price-tag ${pack.isFree ? 'free' : 'paid'}`}>
                  {pack.isFree ? '免费' : `¥${(pack.price / 100).toFixed(2)}`}
                </span>
              </div>
              <button className="download-button" disabled>
                {/* FUTURE DEV: 下载功能
                  - 实现支付流程
                  - 添加下载管理
                  - 支持断点续传
                  - 添加下载进度
                */}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7 10 12 15 17 10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                下载
              </button>
            </div>
          </article>
        ))}
      </div>

      {/* FUTURE DEV: 分页功能
        - 实现无限滚动
        - 添加传统分页
        - 支持每页数量选择
      */}
    </div>
  );
};

export default MotionPack; 